<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>动态添加和删除节点</title>
    <style type="text/css">
        .myArea {
            width: 100%;
            height: 80px;
        }

        .myDiv {
            line-height: 30px;
        }
    </style>

    <meta charset="UTF-8">
    <title>getElementsByTagName获取checkbox进行全选</title>
    <style type="text/css">
        #myTable {
            width: 900px;
            margin: 0px auto;
            background-color: #008000;
        }

        #myTable td,
        #myTable th {
            background-color: white;
        }

        #myDiv {
            width: 900px;
            margin: 0px auto;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>

</head>

<body>
    <h2>工作经历</h2>
    <hr />
    <div id="myContainer">
        <div class="myDiv" id="div1">
            公司名称:<input type="text" />
            职位:<input type="text" />
            <a href="#" onclick="del()">删除工作经历</a>
            <br />
            工作职责及工作内容描述:
            <textarea class="myArea"></textarea>
            <hr />
        </div>
    </div>

    <div style="line-height: 30px; text-align: right;">
        <a href="#" onclick="add()">添加工作经历</a>
    </div>
    <script>
        //获取div
        var div = document.querySelector("#myContainer");
        var divArr = document.querySelector("#myContainer").childNodes;
        var length = divArr.length;

        function add() {
            //获取内容
            var textArr = document.querySelectorAll("input");
            var text = textArr[0].value;
            var text1 = textArr[1].value;
            var text2 = document.querySelector(".myArea").value;
            //添加到div中
            var div = document.querySelector("#myContainer");
            var divMode = document.createElement("div");
            divMode.innerHTML = "公司名称:" + text + "<br/>" + "职位:" + text1 + "<br/>" + "工作职责及工作内容描述:" + text2 + "<br/><hr>";
            div.appendChild(divMode);
            //清空表单
            textArr[0].value = ""; textArr[1].value = ""; document.querySelector(".myArea").value = "";
            length++;

        }
        function del() {
            if (length >= 3) {
                div.removeChild(divArr[--length]);
            }


        }
    </script>

    <table cellspacing="1" id="myTable">
        <tr>
            <th width="200">
                <input type="checkbox" id="selAll" onchange="selectAll()" />全选
                <input type="checkbox" id="selInvert" onchange="selectInvert()" />反选
            </th>
            <th width="200">姓名</th>
            <th width="200">性别</th>
            <th width="200">专业</th>
            <th width="200">爱好</th>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>刘备</td>
            <td>男</td>
            <td>软件开发</td>
            <td>抽烟</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>关羽</td>
            <td>男</td>
            <td>国际贸易</td>
            <td>喝酒</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>张飞</td>
            <td>男</td>
            <td>园林设计</td>
            <td>烫头发</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>赵云</td>
            <td>男</td>
            <td>平面设计</td>
            <td>抽烟</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>黄忠</td>
            <td>男</td>
            <td>影视制作</td>
            <td>玩游戏</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>小乔</td>
            <td>女</td>
            <td>高级护理</td>
            <td>唱歌</td>
        </tr>
    </table>
    <script>
        //全选
        var num = 0;
        var inputArr = document.querySelectorAll("tr td input");
        function selectAll() {
            var demo = document.querySelector("#selAll").checked;
            //console.log(demo);
            if (demo) inputArr.forEach(e => e.checked = true);
            else inputArr.forEach(e => e.checked = false);
            if(demo){
                num = inputArr.length;
            }
        }
        //给每个按键都绑定切换事件
        for (let i = 0; i < inputArr.length; i++) {
            inputArr[i].onchange = function () {
                var demo = document.querySelector("#selAll");
                inputArr[i].checked == true ? num++ : num--;
                if(num == inputArr.length){
                    demo.checked =true;
                }else{
                    demo.checked =false;
                }
                console.log(num);
            }
        }
        //反选
        function selectInvert(){
            for(let i = 0; i< inputArr.length;i++){
                if(inputArr[i].checked==true){
                    inputArr[i].checked=false;
                }else{
                    inputArr[i].checked=true;
                }
            }
        }

        





       
    </script>
</body>

</html>

